<template>
  <div class="refund_container">
    <div class="main">
      <div class="order" v-for="(item, index) in list" :key="index">
        <div class="left">
          <div class="img">
            <img v-lazy="item.image" alt="" />
          </div>
          <div class="inf">
            {{ item.store_name }}
          </div>
        </div>
        <div class="right">
          <div class="count">￥{{ item.price }}</div>
          <div class="num">x{{ item.cart_num }}</div>
        </div>
      </div>
    </div>
    <div class="com">
      <ul class="tt_com">
        <li class="item dj count">
          <div class="left">退货件数</div>
          <div class="right">{{ count.total_num }}</div>
        </li>
        <li class="item dj price">
          <div class="left">退款金额</div>
          <div class="right">￥{{ count.pay_price }}</div>
        </li>
        <li class="item dj reason">
          <div class="left">退款原因</div>
          <div class="right" @click="isShow = !isShow">
            {{ reason }} <van-icon name="arrow" />
          </div>
          <ul class="rea_box" v-if="isShow">
            <li
              :class="reason == '选择退款原因' ? 'active' : ''"
              @click="tabReason('选择退款原因')"
            >
              选择退款原因
            </li>
            <li
              v-for="(item, index) in reasonList"
              :key="index"
              :class="reason == item ? 'active' : ''"
              @click="tabReason(item)"
            >
              {{ item }}
            </li>
          </ul>
        </li>
        <li class="item tip">
          <div class="left">备注说明</div>
          <div class="right">
            <textarea
              placeholder="填写备注信息，100字以内"
              maxlength="100"
              v-model="reasonContent"
            ></textarea>
          </div>
        </li>
        <li class="tu">
          <div class="top">
            <div class="lt">上传图片</div>
            <div class="lr">(最多上传3张)</div>
          </div>
          <div class="bottom">
            <van-uploader
             :after-read="afterRead"
              v-model="fileList"
              multiple
              :max-count="3"
              
            >
              <div class="box_img">
                <div class="img" ref="fileImg">
                  
                </div>
                <div class="up_img">
                  <div><van-icon name="photograph" /></div>
                  <p>上传凭证</p>
                </div>
              </div>
            </van-uploader>

            <!--<van-uploader
              :after-read="afterRead"
              v-model="fileList"
              multiple
              :max-count="3"
              :deletable="false"
              @delete="delImg"
            >
              
                <div class="up_img">
                  <div><van-icon name="photograph" /></div>
                  <p>上传凭证</p>
                </div>
              
               <template #preview-cover>
                <i class="delete" @click="delImg">
                  <van-icon name="cross" />
                </i>
              </template> 
            </van-uploader>-->
          </div>
        </li>
      </ul>
    </div>

    <div class="tui">
      <a @click="getRefund"> 申请退款 </a>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { Uploader } from "vant";
export default {
  name: "Refund",
  data() {
    return {
      order_id: "",
      count: {},
      list: [],
      reason: "选择退款原因",
      reasonList: [],
      isShow: false,
      fileList: [],
      reasonContent:"",
      imgFile:new FormData()
    };
  },
  created() {
    this.order_id = this.$route.params.id;
    console.log(this.order_id);
    this.initData();
    this.getSeason();
  },
  methods: {
    initData() {
      let token = localStorage.getItem("token");

      axios({
        url: `/api/order/detail/${this.order_id}`,
        method: "GET",

        headers: {
          "Authori-zation": "Bearer " + token,
        },
      }).then((res) => {
        console.log("成功", res.data);
        let list = [];
        let result = res.data.data;
        this.count.pay_price = result.pay_price;
        this.count.total_num = result.total_num;

        result.cartInfo.forEach((item) => {
          let obj = {
            cart_num: item.cart_num,
            image: item.productInfo.image,
            price: item.productInfo.attrInfo.price,
            store_name: item.productInfo.store_name,
          };
          list.push(obj);
        });

        this.list = list;
      });
    },

    getSeason() {
      let token = localStorage.getItem("token");

      axios({
        url: `/api/order/refund/reason`,
        method: "GET",

        headers: {
          "Authori-zation": "Bearer " + token,
        },
      }).then((res) => {
        this.reasonList = res.data.data;
      });
    },

    tabReason(item) {
      this.reason = item;
      this.isShow = false;
    },

    afterRead(file) {
      // 此时可以自行将文件上传至服务器

    //   this.$refs.fileImg.style.backgroundImage = `url(${file.content})`
      console.log(file);
    //   for(const item of file){
    //       console.log(item)
    //   }
    //   this.uploadImg(file,file.file.name)
        this.imgFile.append(file.file.name,file)
        console.log(this.imgFile)
        this.uploadImg(this.imgFile)
    },

    getRefund(){
        console.log("xxx")
        let token = localStorage.getItem("token");

      axios({
        url: `/api/order/refund/verify`,
        method: "POST",
        data:{
            refund_reason_wap_explain:this.reasonContent,
            uni:this.order_id,
            text:this.reason,
        },
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      }).then((res) => {
        let {msg,status} = res.data
        console.log(res.data)
       
        
            Toast.success(msg);
        
      });
    },

    uploadImg(data){
        let token = localStorage.getItem("token");

      axios({
        url: `/api/upload/image`,
        method: "POST",
       data,
        headers: {
          "Authori-zation": "Bearer " + token,
          "Content-Type":"multipart/from-data"
        },
      }).then((res) => {
        console.log("上传成功",res.data)
      }).catch(err=>{
          console.log("上传失败")
      })
    },

    delImg() {
      console.log(66666);
    },
  },
};
</script>

<style lang="scss" scoped>
.refund_container {
  .main {
    margin-bottom: 14px;
    .order {
      display: flex;
      padding: 11px 15px;
      justify-content: space-between;
      background-color: #fff;
      .left {
        display: flex;
        .img {
          margin-right: 15px;
          width: 60px;
          height: 60px;
          border-radius: 4px;
          overflow: hidden;
          > img {
            width: 100%;
            height: 100%;
          }
        }
        .inf {
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
          color: #282828;
          font-size: 14px;
          width: 180px;
          height: 60px;
        }
      }
      .right {
        div {
          font-size: 14px;
          color: #999;
          text-align: right;
        }
        .num {
          padding-top: 5px;
        }
      }
    }
  }
  .com {
    width: 100%;
    background-color: #fff;
    .tt_com {
      padding-left: 15px;
      .item {
        padding-right: 15px;
        display: flex;
        justify-content: space-between;
        //   align-items: center;
        border-bottom: 1px solid #eee;
        .left {
          font-size: 15px;
          color: #333;
        }
        .right {
          width: 70%;
        }
      }
      .dj {
        align-items: center;
        height: 45px;
        > .right {
          text-align: right;
          font-size: 15px;
          color: #282828;
        }
      }

      .tip {
        //   padding:  15px 0;
        padding-top: 15px;
        padding-bottom: 15px;
        .right {
          width: 70%;
          textarea {
            height: 50px;
            width: 100%;
            color: #282828;
            font-size: 14px;
            text-align: right;
            border: 0px;
          }
        }
      }

      .reason {
        position: relative;
        .right {
          i {
            font-weight: 700;
          }
        }
        .rea_box {
          width: 70%;
          position: absolute;
          z-index: 100;
          background-color: #fff;
          top: 38px;
          right: 15px;
          border: 1px solid black;
          > li {
            height: 40px;
            line-height: 40px;
            padding-right: 15px;
            font-size: 15px;
            text-align: right;
            font-size: 15px;
            color: #282828;
          }
          > li.active {
            background-color: #ade1f5;
            color: #fff;
          }
        }
      }
      .tu {
        padding-right: 15px;
        .top {
          height: 45px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .lt {
            font-size: 15px;
            color: #333;
          }
          .lr {
            color: #bbb;
            font-size: 15px;
          }
        }
        .bottom {
          padding-bottom: 15px;
        }
      }
    }
  }
  .tui {
    width: 100%;
    margin-top: 20px;
    a {
      display: block;
      width: 85%;
      color: #fff;
      font-size: 16px;
      height: 43px;
      text-align: center;
      line-height: 43px;
      background-color: #e93323;
      border-radius: 21.5px;
      margin: 0 auto;
      
    }
  }

  .bottom {
    .box_img {
      width: 80px;
      height: 80px;
      position: relative;
      border: 1px solid #bbbbbb;
      
      .img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        // z-index: 1000;
        background-size: 100% 100%;
        // > img {
        //   width: 100%;
        //   height: 100%;
        // }
      }
      .up_img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        padding-top: 18px;
        div {
          text-align: center;
          font-size: 22px;
          color: #bbb;
          font-weight: 600;
        }
        p {
          text-align: center;
          font-size: 15px;
           color: #c0c0c0;
          color: #bbb;
        }
      }
    }

    // /deep/.van-uploader {
    //   .van-uploader__preview {
    //     padding: 0 15px 10px 0px !important;
    //   }
    //   .van-image.van-uploader__preview-image {
    //     overflow: inherit !important;
    //   }

    //   .van-uploader__preview-cover {
    //     position: relative;
    //     .delete {
    //       display: block;
    //       width: 22px;
    //       height: 22px;
    //       border-radius: 50%;
    //       background-color: #e93323;
    //       position: absolute;
    //       top: -80px;
    //       right: -8px;
    //       font-size: 13px;
    //       text-align: center;
    //       line-height: 22px;
    //       z-index: 200;
    //     }
    //   }
    // }
  }
}
// .up_img {
//   width: 80px;
//   height: 80px;
//
//   padding-top: 15px;
//   position: relative;
//   p {
//     text-align: center;
//     font-size: 14px;
//     color: #bbb;
//     font-weight: 600;
//   }
//   div {
//     text-align: center;
//     color: #c0c0c0;
//   }
//   .del {
//     width: 22px;
//     height: 22px;
//     border-radius: 50%;
//     background-color: #e93323;
//     position: absolute;
//     top: -8px;
//     right: -8px;
//     font-size: 13px;
//     text-align: center;
//     line-height: 22px;
//     z-index: 200;
//   }
// }
</style>

